<template>
  <div>
    <el-page-header @back="goBackOrders" content="商品详情页"> </el-page-header>
    <el-divider content-position="center">商品信息</el-divider>
    <!-- 商品信息 -->
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="商品ID">
        <span>{{ foodInfo.id }}</span>
      </el-form-item>
    </el-form>
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="类别">
        <span>{{ foodInfo.category }}</span>
      </el-form-item>
    </el-form>
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="商品名称">
        <span>{{ foodInfo.name }}</span>
      </el-form-item>
    </el-form>
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="状态">
        <el-switch
          v-model="foodInfo.status"
          active-text="上架"
          inactive-text="下架"
          :active-value="1"
          :inactive-value="0"
          disabled
        ></el-switch>
      </el-form-item>
    </el-form>
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="封面">
        <el-switch
          v-model="foodInfo.cover"
          active-color="#13ce66"
          inactive-color="#C0CCDA"
          active-text="是"
          inactive-text="否"
          :active-value="1"
          :inactive-value="0"
          disabled
        ></el-switch>
      </el-form-item>
    </el-form>
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="描述">
        <span>{{ foodInfo.description }}</span>
      </el-form-item>
    </el-form>
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="创建时间">
        <span>{{ foodInfo.created_time }}</span>
      </el-form-item>
    </el-form>
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="更新时间">
        <span>{{ foodInfo.updated_time }}</span>
      </el-form-item>
    </el-form>
    <!-- 数量表格 -->
    <template>
      <el-table
        :data="quantity"
        border
        :header-cell-style="{ background: '#eed2d8', color: '#606266' }"
      >
        <el-table-column prop="price" align="center" label="原价">
        </el-table-column>
        <el-table-column prop="priced" align="center" label="现价">
        </el-table-column>
        <el-table-column prop="stock" align="center" label="库存数量">
        </el-table-column>
        <el-table-column prop="month_count" align="center" label="月销售量">
        </el-table-column>
        <el-table-column prop="total_count" align="center" label="总销售量">
        </el-table-column>
        <el-table-column prop="view_count" align="center" label="总浏览量">
        </el-table-column>
        <el-table-column prop="comment_count" align="center" label="评论数量">
        </el-table-column>
      </el-table>
    </template>
    <!-- 库存变更日志 -->
    <el-divider content-position="center">库存变更日志</el-divider>
    <template>
      <el-table
        :data="stockLog"
        max-height="350"
        border
        :header-cell-style="{ background: '#eed2d8', color: '#606266' }"
      >
        <el-table-column prop="food_id" align="center" label="商品ID">
        </el-table-column>
        <el-table-column prop="unit" align="center" label="执行">
        </el-table-column>
        <el-table-column
          prop="total_stock"
          sortable
          align="center"
          label="库存余量"
        >
        </el-table-column>
        <el-table-column prop="note" align="center" label="类型">
        </el-table-column>
        <el-table-column
          prop="created_time"
          sortable
          align="center"
          label="执行时间"
        >
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination
        @size-change="handleSizeChange_Stock"
        @current-change="handleCurrentChange_Stock"
        :current-page="queryInfo_Stock.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo_Stock.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_stock"
      ></el-pagination>
    </template>
    <!-- 商品售卖日志 -->
    <el-divider content-position="center">商品售卖日志</el-divider>
    <template>
      <el-table
        :data="saleLog"
        max-height="350"
        border
        :header-cell-style="{ background: '#eed2d8', color: '#606266' }"
      >
        <el-table-column prop="food_id" align="center" label="商品ID">
        </el-table-column>
        <el-table-column
          prop="member_id"
          sortable
          align="center"
          label="会员ID"
        >
        </el-table-column>
        <el-table-column prop="order_id" sortable align="center" label="订单ID">
        </el-table-column>
        <el-table-column prop="price" align="center" label="单价">
        </el-table-column>
        <el-table-column prop="quantity" sortable align="center" label="数量">
        </el-table-column>
        <el-table-column
          prop="created_time"
          sortable
          align="center"
          label="时间"
        >
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination
        @size-change="handleSizeChange_Sale"
        @current-change="handleCurrentChange_Sale"
        :current-page="queryInfo_Sale.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo_Sale.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_sale"
      ></el-pagination>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo_Stock: {
        id: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少数据
        pagesize: 5,
      },
      queryInfo_Sale: {
        id: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少数据
        pagesize: 5,
      },
      total_stock: 0,
      total_sale: 0,
      foodInfo: {},
      quantity: [],
      stockLog: [],
      saleLog: [],
    }
  },
  watch: {
    $route() {
      this.foodInfo = this.$route.params
      this.queryInfo_Sale.id = this.$route.params.id
      this.queryInfo_Stock.id = this.$route.params.id
      this.handleQuantity()
      this.getStockLog(this.queryInfo_Stock)
      this.getSaleLog(this.queryInfo_Sale)
    },
  },
  methods: {
    goBackOrders() {
      this.$router.push('/foods')
    },
    // 库存变更日志
    async getStockLog(queryInfo_Stock) {
      const path = this.URL.FoodStockLog
      const { data: result } = await this.$http.get(path, {
        params: queryInfo_Stock,
      })
      this.stockLog = result.data
      this.total_stock = result.total
    },
    // 商品售卖日志
    async getSaleLog(queryInfo_Sale) {
      const path = this.URL.FoodSaleLog
      const { data: result } = await this.$http.get(path, {
        params: queryInfo_Sale,
      })
      this.saleLog = result.data
      this.total_sale = result.total
    },
    // Stock
    handleSizeChange_Stock(pagesize) {
      this.queryInfo_Stock.pagesize = pagesize
      // // 重新请求
      this.getStockLog(this.queryInfo_Stock)
    },
    // 监听 页码值 改变的事件
    handleCurrentChange_Stock(pagenum) {
      this.queryInfo_Stock.pagenum = pagenum
      // 重新请求
      this.getStockLog(this.queryInfo_Stock)
    },
    // Sale
    handleSizeChange_Sale(pagesize) {
      this.queryInfo_Sale.pagesize = pagesize
      // // 重新请求
      this.getSaleLog(this.queryInfo_Sale)
    },
    // 监听 页码值 改变的事件
    handleCurrentChange_Sale(pagenum) {
      this.queryInfo_Sale.pagenum = pagenum
      // 重新请求
      this.getSaleLog(this.queryInfo_Sale)
    },
    // 将数量装入数组
    handleQuantity() {
      this.quantity[0] = this.$route.params
    },
  },
  created() {
    this.foodInfo = this.$route.params
    this.handleQuantity()
    this.getStockLog(this.queryInfo_Stock)
    this.getSaleLog(this.queryInfo_Sale)
  },
}
</script>

<style>
.el-table .success-row {
  background: #f0f9eb;
}
</style>